
<style scoped>
    .index {
        position: fixed;
        width: 100%;
        height: 100%;
        /* background-image: url("../images/background.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        filter: blur(10px);   */
    }

    .comp {
        height: 10%;
    }

    .logo-area {
        width: 100%;
        height: 25%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;       
    }
    .logo-area > img {
        width: 160px;
        height: 160px;
        border-radius: 80px;
    }

    .input-area {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .warp > .input {
        display: flex;
        flex-direction: row;
    }
    .warp > .input > input {
        font-size: 18px;
        margin: 0px;
        padding: 5px;
        outline: none;
    }
    .warp > .input > input[type=text] {
        width: 350px;
    }
    .warp > .input > input[type=button] {
        margin-left: -1px;
    }
    .warp > ul {
        margin: 0px;
        margin-top: 10px;
        padding: 0px;
        list-style-type: none;
        display: flex;
        flex-direction: row;
    }
    .warp > ul > li {
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .warp > ul > li > input[type=radio] {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }
</style>

<template>
    <div class="index">
        <div class="comp"></div>
        <div class="logo-area">
            <img src="../images/logo.jpg" />
        </div>
        <div class="input-area">
            <div class="warp">
                <div class="input">
                    <input type="text" v-model="inputKeyword" :placeholder="placeholderDict[mode]" />
                    <input type="button" value="查找" @click="searchClick" />
                </div>
                <ul>
                    <li>
                        <input type="radio" name="mode" value="querybyname" v-model="mode" />
                        <label>查姓名</label>
                    </li>
                    <li>
                        <input type="radio" name="mode" value="querybyidcard" v-model="mode" />
                        <label>查证件号</label>
                    </li>
                    <li>
                        <input type="radio" name="mode" value="querybyaddress" v-model="mode" />
                        <label>查地址</label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data () {
            return {
                inputKeyword: "",
                mode: "querybyname",
                placeholderDict: {
                    "querybyname": "请输入你想要查询的姓名",
                    "querybyidcard": "请输入你想要查询的证件号（如身份证等）",
                    "querybyaddress": "请输入你想要查询的地址"
                }
            };
        },
        methods: {
            searchClick () {
                alert(this.inputKeyword)
            }
        }
    }
</script>


